import 'package:flutter/material.dart';

class SecondPage extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {

    return new SecondPageState();
  }

}

class SecondPageState extends State<SecondPage>{

  static double value = 0;

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
//      appBar: new AppBar(
//
//          title: new Text('界面2')
//
//      ),
      body: new SingleChildScrollView(

        child: new Column(

          children: <Widget>[

            new MyButton(),

            new Container(
              color: Colors.red[500],
              padding: new EdgeInsets.fromLTRB(10, 10, 10, 10),
              margin: new EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: new Container(

                color: Colors.blue,
                padding: new EdgeInsets.fromLTRB(10, 10, 10, 10),
                margin: new EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: new Text("你好啊"),

              ),

            ),

            new Text('你好'),

            new Row(

              children: <Widget>[

                new Text('当前值:'),

                new Text('${value.toInt().toString()}')

              ],

            ),
            
            new Slider(value: value,min: 0,max: 100, onChanged: (double){

                setState(() {

                  value = double.roundToDouble();

                });

            }),

            new MySlider(),

          ],

        ),

      )
    );
  }

}

class MySlider extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {

    return new _RGBSlider();
  }

}

class _RGBSlider extends State<MySlider>{

  double progressValue=0.0;

  @override
  Widget build(BuildContext context) {

    return new Container(

      margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),

      child: new Slider(
        value: progressValue,//当前值
        label: '当前值:$progressValue',//divisions设置显示在节点上的label
        min: -100.0,//最小值
        max: 100.0,//最大值
        divisions: 2000,//分为几块，比如设置为5，Slider只能滑动到5个位置
        inactiveColor: Colors.black12,//未滑动过的区域的颜色
        activeColor: Colors.blue,//滑动过的区域的颜色
        onChangeStart: (double){

          setState(() {
            progressValue=double.roundToDouble();
          });

        },
        onChangeEnd:(double){

          setState(() {
            progressValue=double.roundToDouble();
          });

        } ,
        onChanged: (double){

          setState(() {

            progressValue=double.roundToDouble();
          });
        },
      ),

    );

  }

}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () {
        print('MyButton was tapped!');
      },
      child: new Container(
        height: 36.0,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.fromLTRB(5.0, 8.0, 5.0, 8.0),
        decoration: new BoxDecoration(
          borderRadius: new BorderRadius.circular(5.0),
          color: Colors.lightGreen[500],
        ),
        child: new Center(
          child: new Text('Engage'),
        ),
      ),
    );
  }
}
